import React from 'react';
import './index.css';

const ProfileList = ({ data }) => {
    function generateTemplate(data) {
        if (!data) return (<></>);
        if (data.header && data.list.length > 0) {
            return (
                <>
                    <div className="list-header">{data.header}</div>
                    {generateList(data.list, true)}
                </>
            )
        } else if (!data.header && data.list.length > 0) {
            return generateList(data.list, false);
        }
    }
    function generateList(list, hasHeader) {
        return (
            <>
                {
                    list.map(item => (
                        <div className={hasHeader ? "item no-bottom" : "item"} key={item.title}>
                            {item.title}
                        </div>))
                }
            </>
        )
    }
    return (
        <div className="list-container">
            {
                generateTemplate(data)
            }
        </div>
    )
}

export default ProfileList;